<template>
	<view class="cancel_success">
		<uv-navbar placeholder autoBack bgColor="#CA1C1D">
			<template v-slot:left>
				<view class="left_slot">
					<image src="@/static/images/back.png"></image>
				</view>
			</template>
			<template v-slot:center>
				<view class="slot_title">
					<image src="@/static/images/m23.png"></image>
					<text>取消成功</text>
				</view>
			</template>
		</uv-navbar>
		<view class="header">
			<view class="header_view">
				<uv-steps current="0" inactiveColor="#fff" activeColor="#fff">
					<uv-steps-item title="已下单">
						<template v-slot:icon>
							<image src="@/static/images/m24.png" class="icon"></image>
						</template>
					</uv-steps-item>
					<uv-steps-item title="已出库">
						<template v-slot:icon>
							<image src="@/static/images/m24.png" class="icon"></image>
						</template>
					</uv-steps-item>
					<uv-steps-item title="运输中">
						<template v-slot:icon>
							<image src="@/static/images/m24.png" class="icon"></image>
						</template>
					</uv-steps-item>
				</uv-steps>
			</view>
		</view>
		<view class="content">
			<uv-steps current="0" direction="column">
				<uv-steps-item title="收货地址：河南省郑州市金水区收货地址：河南省郑市金水区收货地址：河南省" desc="10:30"></uv-steps-item>
				<uv-steps-item title="已出库" desc="10:35"></uv-steps-item>
				<uv-steps-item title="运输中" desc="11:40"></uv-steps-item>
			</uv-steps>
			<view class="oper">
				<view class="item">
					<text>收起</text>
					<image src="@/static/images/jt1.png"></image>
				</view>
				<view class="item">
					<text>展开</text>
					<image src="@/static/images/jt1.png"></image>
				</view>
			</view>
		</view>
		<view class="base">
			<view class="base_head">基本信息</view>
			<view class="cell">
				<view class="key">订单编号</view>
				<view class="value">20704184822</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style scoped lang="scss">
	.cancel_success {
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));
		background-color: #f5f5f5;

		.left_slot {
			image {
				width: 43rpx;
				height: 36rpx;
			}
		}

		.slot_title {
			image {
				width: 30rpx;
				height: 30rpx;
			}

			text {
				color: #FFFFFF;
				font-size: 40rpx;
				font-weight: bold;
				padding-left: 22rpx;
				box-sizing: border-box;
			}
		}

		.header {
			padding: 50rpx 30rpx;
			box-sizing: border-box;
			background: #CA1C1D;

			.header_view {
				border-radius: 26rpx;
				padding: 25rpx 0rpx;
				box-sizing: border-box;
				background: rgba(255, 255, 255, .5);

				:deep() {
					.uv-steps-item__wrapper {
						background-color: transparent;
					}

					.uv-text__value--main,
					.uv-text__value--content {
						color: #fff;
					}
				}

				.icon {
					width: 44rpx;
					height: 44rpx;
				}
			}
		}

		.content {
			width: 750rpx;
			border-radius: 24rpx;
			padding: 65rpx 30rpx 24rpx;
			box-sizing: border-box;
			background: #FFFFFF;

			.oper {
				display: flex;
				justify-content: flex-end;
				padding-right: 100rpx;
				box-sizing: border-box;

				.item {
					width: 148rpx;
					height: 50rpx;
					border-radius: 25rpx;
					margin-right: 20rpx;
					border: 2rpx solid #787878;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						color: #222222;
						font-size: 26rpx;
						padding-right: 15rpx;
						box-sizing: border-box;
					}

					image {
						width: 18rpx;
						height: 8rpx;
					}
				}
			}
		}

		.base {
			border-radius: 24rpx;
			margin-top: 30rpx;
			padding: 40rpx 0 37rpx 32rpx;
			box-sizing: border-box;
			background: #FFFFFF;

			.base_head {
				color: #222222;
				font-size: 30rpx;
				font-weight: bold;
			}

			.cell {
				margin-top: 30rpx;
				display: flex;

				.key {
					color: #737373;
					font-size: 28rpx;
				}

				.value {
					color: #222222;
					font-size: 28rpx;
					padding-left: 28rpx;
					box-sizing: border-box;
				}
			}
		}
	}
</style>